<template>
    <!-- <ui-container> -->
        <view class="wrap">
            <view class="cards" v-if="!eleStatusMsg.tlwStatusLabel">
                <view style="">
                    <image src="@/static/images/default.png"></image>
                </view>
                <view>暂未开通梯联网</view>
            </view>
            <view class="card" v-if="eleStatusMsg.tlwStatusLabel" style="padding-bottom: 40rpx">
                <view class="title padding">
                    电梯实时状态
                    <view class="right-btn" v-if="detail.id &&
                        detail.tlwDeviceId &&
                        eleStatusMsg.tlwStatusLabel &&
                        !eleStatusMsg.planStatus &&
                        hanleToken('get', 'token') &&
                        eleStatusMsg.tlwStatus !== 0
                        " @click="showMoreFuc('elevatorDetailStatusInfo')">
                        全部状态
                        <uni-icons color="#999999" size="14px" type="forward"></uni-icons>
                    </view>
                </view>

                <view class="working" v-if="eleStatusMsg.planStatus">
                    <image src="@/static/images/working.png"></image>

                    <view class="">维保中</view>
                </view>
                <!-- 电梯状态 -->
                <view class="status" v-if="!eleStatusMsg.planStatus &&
                    eleStatusMsg.tlwStatus &&
                    detail.tlwDeviceId
                    ">电梯工作中</view>

                <view class="working" v-if="!eleStatusMsg.planStatus &&
                    eleStatusMsg.tlwStatus == 0 &&
                    detail.tlwDeviceId
                    ">
                    <image src="@/static/images/outline.png"></image>

                    <view class="" style="color: #ccc">电梯离线中</view>
                </view>
                <!-- 电梯状态end -->
                <!-- 实时数据 -->
                <view class="block-list" v-if="eleStatusMsg.tlwStatus &&
                    detail.id &&
                    detail.tlwDeviceId &&
                    eleStatusMsg.tlwStatusLabel &&
                    !eleStatusMsg.planStatus
                    ">
                    <view class="block-item">
                        <image src="@/static/images/report/floor.png" mode=""></image>
                        <view class="block-item-info">
                            <view class="block-item-info-title">当前楼层</view>
                            <view class="block-item-info-val">
                                {{ statusData.floor || 1 }}
                                <text>F</text>
                            </view>
                        </view>
                    </view>
                    <view class="block-item">
                        <image src="@/static/images/report/speed.png" mode=""></image>
                        <view class="block-item-info">
                            <view class="block-item-info-title">速度</view>
                            <view class="block-item-info-val">
                                {{ Math.abs(Number(statusData.speed || 0).toFixed(1)) }}
                                <text>m/s</text>
                            </view>
                        </view>
                    </view>
                    <view class="block-item">
                        <image src="@/static/images/report/door.png" mode=""></image>
                        <view class="block-item-info">
                            <view class="block-item-info-title">轿门状态</view>
                            <view class="block-item-info-val" style="font-size: 42rpx">{{
                                statusData.doorStatus == 0 || statusData.doorStatus == 2
                                ? "开"
                                : "关"
                            }}</view>
                        </view>
                    </view>
                </view>
                <!-- 实时数据end -->

                <!-- 正常 -->
                <view class="" v-if="eleStatusMsg.planStatus == 0"></view>
            </view>

            <!-- 运行指数 detail.deviceId -->
            <view class="card" v-if="eleStatusMsg.tlwStatusLabel">
                <view class="title padding">
                    运行指数
                    <!-- <view class="right-btn" @click="showMoreFuc('elevatorDetailStatictics?id=' + detail.id)">
                      全部指数
                      <uni-icons color="#999999" size="14px" type="forward"></uni-icons>
                  </view> -->
                </view>
                <view class="data-card">
                    <view class="data-card-item" @click="toGraph(id, 0)">
                        <image src="@/static/images/report/mileage.png" mode=""></image>

                        <view class="data-card-item-content">
                            {{ abridgeNumber(statistics.distanceTotal, "米").num || 0 }}
                            <text>{{
                                abridgeNumber(statistics.distanceTotal, "米").name
                            }}</text>
                        </view>
                        <view class="data-card-item-lable">
                            运行里程
                            <uni-icons v-if="role == 2" color="#999999" size="14px" type="forward"></uni-icons>
                        </view>
                    </view>
                    <view class="data-card-item" @click="toGraph(id, 1)">
                        <image src="@/static/images/report/open.png" mode=""></image>

                        <view class="data-card-item-content">
                            {{ abridgeNumber(statistics.doorRunTotal, "次").num || 0 }}
                            <text>{{
                                abridgeNumber(statistics.doorRunTotal, "次").name
                            }}</text>
                        </view>
                        <view class="data-card-item-lable">
                            开关门次数
                            <uni-icons v-if="role == 2" color="#999999" size="14px" type="forward"></uni-icons>
                        </view>
                    </view>
                    <view class="data-card-item" @click="toGraph(id, 2)">
                        <image src="@/static/images/report/run.png" mode=""></image>

                        <view class="data-card-item-content">
                            {{ abridgeNumber(statistics.carRunTotal, "次").num || 0 }}
                            <text>{{
                                abridgeNumber(statistics.carRunTotal, "次").name
                            }}</text>
                        </view>
                        <view class="data-card-item-lable">
                            承运次数
                            <uni-icons v-if="role == 2" color="#999999" size="14px" type="forward"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 运行指数end -->

            <!-- 报警指数start -->
            <view class="card" v-if="eleStatusMsg.tlwStatusLabel" style="padding-bottom: 20rpx">
                <view class="title padding">
                    <view>
                        报警指数
                        <text>(近30天)</text>
                    </view>
                    <view class="right-btn" @click="toRanks" v-if="hanleToken('get', 'token')">
                        更多报警指数
                        <uni-icons color="#999999" size="14px" type="forward"></uni-icons>
                    </view>
                </view>
                <view class="data-card pliceAlarmCard" style="justify-content: flex-start">
                    <view class="data-card-item pliceAlarm_item" v-for="(item, index) in statistics.monitorAlarmCount"
                        :key="index">
                        <view class="lastShow" :style="{
                            background: colorMap[index].background,
                            color: colorMap[index].color,
                        }">{{ "TOP" + Number(index + 1) }}</view>

                        <view class="pliceAlarm_item_content" @click="toPliceList(item)">
                            <view class="pliceAlarm_item_label">{{ item.eventName }}</view>
                            <view class="pliceAlarm_item_count">
                                <view class="number">{{ item.count || 0 }}</view>
                                <view class="icon">
                                    <text>次</text>
                                    <uni-icons color="#999999" size="14px" type="forward"></uni-icons>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 报警指数end -->

            <!-- 监控视频 -->
            <view class="card" v-if="eleStatusMsg.tlwStatusLabel">
                <view class="title padding">
                    监控视频
                    <view class="right-btn" @click="
                        showMoreFuc(
                            'elevatorDetailVideos?id=' +
                            detail.id +
                            '&deviceId=' +
                            detail.tlwDeviceId +
                            '&date=30'
                        )
                        ">
                        视频查询
                        <uni-icons color="#999999" size="14px" type="forward"></uni-icons>
                    </view>
                </view>
                <view class="card-dates">
                    <view class="card-dates-item" @click="
                        showMoreFuc(
                            'elevatorDetailVideos?id=' +
                            detail.id +
                            '&deviceId=' +
                            detail.tlwDeviceId +
                            '&date=1'
                        )
                        ">
                        <view class="name">今天</view>
                        <view class="num">
                            {{ runDetails.videoCount.inToday || 0 }}
                            <text class="unit">条</text>
                        </view>
                    </view>

                    <view class="card-dates-item" @click="
                        showMoreFuc(
                            'elevatorDetailVideos?id=' +
                            detail.id +
                            '&deviceId=' +
                            detail.tlwDeviceId +
                            '&date=30'
                        )
                        ">
                        <view class="name">近30天</view>
                        <view class="num">
                            {{
                                abridgeNumber(runDetails.videoCount.inThirtyDays, "条").num || 0
                            }}

                            <text class="unit">{{
                                abridgeNumber(runDetails.videoCount.inThirtyDays, "条").name
                            }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 监控视频 end -->

            <view style="width:100%;height:200rpx">

            </view>

        </view>
    <!-- </ui-container> -->
</template>
  
<script>

import { mapState } from 'vuex';

import { formatTime, hanleToken, getBeforeDate, reSetNumber } from '@/utils/utils.js';
import { } from '@/utils/utils.js';
import {
	detail,
	getStopResult,
	feathEleStatus,
	feathMonitor,
} from '@/apis/owner.js';

import { IOT } from '@/utils/IOT.js';
export default {
	props: {
		elevatorId: [String, Number]
	},
	components: {
	},
	onShareAppMessage() {
		return {

		};
	},
	data() {
		return {
			reportBtn: false,
			role: 1, // 1游客  2物业
			subscribeDtl: { id: '' }, // 订阅记录详情
			iot: null, // 梯联网io实例
			stopStatusInfo: [
				{
					name: '维保停梯',
					color: '#F7B500',
					gif: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20210720/a90e5f5a56c72a9e0ff5fd6078196f23.gif',
				},
				{
					name: '维修停梯',
					color: '#FA6400',
					gif: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20210720/9c85557130557c578bf5a4cc91ea17ca.gif',
				},
				{
					name: '困人停梯',
					color: '#E02020',
					gif: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20210720/63ef5f992b4cae50099f61387c03880f.gif',
				},
				{
					name: '故障停梯',
					color: '#FA6400',
					gif: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20210720/9c85557130557c578bf5a4cc91ea17ca.gif',
				},
			],

			value: 0,
			id: '',
			showCalendar: false, // 是否显示保养相关计划日历
			detail: {
				isStop: 1,
				status: 1,
				errorDesc: '设备出现异常征兆，不应长期连续运行，应及时采取措施',
				madeDate: '',
			},

			plans: [], // 保养计划
			runDetails: {
				// 梯联网设备信息统计详情
				carRunTotal: 0,
				distanceTotal: 0,
				doorRunTotal: 0,
				monitorAlarmCount: [],
				videoCount: {
					inThirtyDays: 0,
					inToday: 0,
				},
			}, // 运行指数
			interval: null, // 定时器
			statistics: {
				distanceTotal: 0,
				doorRunTotal: 0,
				carRunTotal: 0,
			}, // 运行指数统计
			statusData: {
				deviceId: '',
				doorRatio: '', // 电梯门关门比例，正常范围0~1, 如果为-1表示不确定
				doorStatus: 1, // 0=开，1=关，2=正在打开，3=正在关闭，-1=未知
				airPressure: '', // 气压
				moving: 0, // 电梯状态，0=静止，1=上行运动，2=下行运动
				height: '', //
				temperature: '', // 轿顶温度
				speed: 0, // 速度，单位m/s
				floor: 1, // 'UNKNOW' = 未知状态
			}, // 电梯状态数据
			eventItem: {},
			elevatorList: [],
			socketTask: null,
			repairList: [], // 电梯维修历史列表
			stopResult: {}, // 停梯原因

			// 折线图配置
			lineOpt: {
				dataLabel: false,
				legend: {
					position: 'top',
					margin: 30,
					top: 10,
					padding: 0,
				},
				enableScroll: true,
				xAxis: {
					xAxisLineHeight: 30,
					fontSize: '12',
					itemCount: 7,
					scrollShow: true, // 新增是否显示滚动条，默认false
					scrollAlign: 'left', // 滚动条初始位置
				},

				yAxis: {
					scale: true,
					nameGap: 40,

					data: [
						{
							axisLine: false,
							position: 'left',
							padding: '10',
							rotateLabel: true,
							format: (val) => {
								return val.toFixed(0) + '元';
							},
						},
					],
					gridType: 'solid',
					dashLength: 4,
					splitNumber: 5,
				},
			},

			LineData: {
				categories: [],
				series: [
					{
						name: '电梯可用率',
						color: '#0091ff',
						data: [],
						// barWidth:'20'
					},
					{
						name: '电梯故障率',
						color: '#e8684a',
						data: [],
					},
				],
			},

			formatTime: formatTime,
			deviceId: '',
			device: null, // 订阅的设备
			hanleToken: hanleToken,
			colorMap: {
				0: { color: '#E02020', background: '#ffebeb' },
				1: { color: '#FA6400', background: '#ffebeb' },
				2: { color: '#F7B500', background: '#FFF8E6' },
				3: { color: '#0091FF', background: '#EEF8FF' },
				4: { color: '#0091FF', background: '#EEF8FF' },
				5: { color: '#0091FF', background: '#EEF8FF' },
			},
			total: 0,
			getBeforeDate: getBeforeDate,
			rescueList: [],
			repairIngList: [], // 进行中维修任务
			maintainIngList: [],
			showMoreMaintain: false,
			eleStatusMsg: {
				buildingName: '',
				elevatorAddress: '',
				maintainStatusLabel: false,
				tlwStatusLabel: false,
				estateElevator: {
					tlwStatus: '',
				},
			},
			rescueMap: {
				1: {
					text: '调度中',
					color: '#0091ff',
					icon: '/static/images/elevatorTask/2.png',
				},
				3: {
					text: '已出发',
					color: '#F7B500',
					icon: '/static/images/elevatorTask/3.png',
				},
				4: {
					text: '已到达',
					color: '#FA6400',
					icon: '/static/images/elevatorTask/6.png',
				},
				5: {
					text: '已完成',
					color: '#999',
					icon: '/static/images/elevatorTask/4.png',
				},
			},
			showMoreRescue: false,
			showMoreRepair: false,
			visible: false, // 重点关注
			showTips: false,
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
		// showSignal(){
		//   if(){

		//   }
		// }
	},
	async created(os) {
		this.id = this.elevatorId;
		// 电梯基础信息
		this.getBaseInfo();
		await this.feathEleStatus();

		// 如果有开通梯联网
		if (this.eleStatusMsg.tlwStatusLabel) {
			console.log('调用梯联网');
			// this.getStatusStatistics()
			this.getMonitorData();
		}
	},

	beforeDestroy() {
		if (this.iot) {
			this.iot.close();
		}
	},

	methods: {

		// 报警统计
		toRanks() {
			let item = encodeURIComponent(
				JSON.stringify({
					code: this.id,
					elevatorId: this.id,
					name: this.eleStatusMsg.elevatorAddress,
				})
			);
			let dateObj = encodeURIComponent(
				JSON.stringify({
					startAt: new Date(getBeforeDate(29)).getTime(),
					endAt: new Date().getTime(),
					checked: 'month',
				})
			);
			uni.navigateTo({
				url:
                    '/pages/alarmRankings/alarmElevator?item=' +
                    item +
                    '&buildingId=' +
                    this.detail.buildingId +
                    '&dateObj=' +
                    dateObj +
                    '&headerIndex=' +
                    2,
			});
		},

		// 获取报警指数和报警列表
		getMonitorData() {
			feathMonitor(this.id).then((res) => {
				console.log('报警指数', res);

				this.statistics = res.data;
				let list = [];
				res.data.monitorAlarmCount.forEach((item) => {
					console.log(item);
					if (item.count > 0 && !item.eventName.includes('撤销')) {
						list.push(item);
					}
				}); 
				this.statistics.monitorAlarmCount = list;
				this.runDetails = res.data;
			});
		},
		// 去报警详情
		toDetail(item, elevatorId) {
			if (hanleToken('get', 'token') && this.userinfo.user_id) {
				let obj = {
					total: this.total,
					pindex: 0,
					eventName: item.eventName,
					typeName: item.typeName,
				};
				uni.navigateTo({
					url: `/packPage/myElevators/myCallPoliceDetail?id=${item.id
					}&elevatorId=${elevatorId}&single=1&obj=${JSON.stringify(obj)}`,
				});
			} else {
				uni.navigateTo({
					url: '../login/index?type=1',
				});
				return;
			}
		},
		// 获取电梯状态,展示梯无忧梯联网
		feathEleStatus() {
			return new Promise((reslove) => {
				feathEleStatus({ elevatorId: this.id }).then((res) => {
					this.eleStatusMsg.favElevatorId = res.data.favElevatorId;
					if (this.eleStatusMsg.tlwStatus) {
						return;
					}
					this.eleStatusMsg = res.data;
					reslove(res.data);
				});
			});
		},
		// 去运行指数曲线图
		toGraph(id, type) {
			if (!this.userinfo.user_id || this.role != 2) {
				return;
			}
			if (hanleToken('get', 'token')) {
				const { buildingName, elevatorAddress } = this.detail;
				let msg = {
					buildingName,
					elevatorAddress,
				};
				uni.navigateTo({
					url: `/packPage/dataStatistics/graph?id=${id}&type=${type}&msg=` + JSON.stringify(msg),
				});
			} else {
				uni.navigateTo({
					url: '../login/index?type=1',
				});
				return;
			}
		},
		getDateRange(year, month) {
			var myDate1 = new Date(year, month, 1).getDate();
			var myDate2 = new Date(year, month + 1, 0).getDate();
			let obj = {
				start: reSetNumber(myDate1),
				end: reSetNumber(myDate2),
			};
			return obj;
		},

		// 跳转到 进度页面
		handlSpeed() {
			uni.navigateTo({
				url:
                    '/packPage/repairPage/repSpeed?id=' +
                    this.stopResult.planId +
                    '&state=' +
                    this.stopResult.planStatus,
			});
		},
		abridgeNumber(num, name, fixed = 1) {
			if (num < 10000) {
				return {
					num: Number(num).toFixed(0),
					name: name,
				};
			}
			return {
				num:
                    num / 10000 >= 1000
                    	? (num / 10000).toFixed(0)
                    	: (num / 10000).toFixed(fixed),
				name: '万' + name,
			};
		},
		// 获取停梯原因
		getStopResult() {
			getStopResult({
				elevatorId: this.id,
			}).then((res) => {
				console.log('getStopResult', res);
				this.stopResult = res.data;
			});
		},

		// 运行指数
		getStatusStatistics() {
			feathMonitor(this.id)
				.then((res) => {
					console.log(res, '运行');
					this.statistics = res.data;
				})
				.catch((err) => {
					console.log(err);
					// this.statistics=err
				});
		},

		// 查看更多
		showMoreFuc(url) {
			// console.log(this.id,this.detail.id);
			console.log(url, '路径');
			if (hanleToken('get', 'token')) {
				uni.navigateTo({
					url: url + '?id=' + this.id,
					// url,
					fail: (err) => {
						console.log(err);
					},
				});
			} else {
				uni.navigateTo({
					url: '../login/index?type=1',
				});
				return;
			}
		},
		// 获取电梯基础信息
		getBaseInfo() {
			uni.showLoading({
				title: '加载中',
			});
			detail({ id: this.id }).then((res) => {
				this.detail = res.data;
				if (res.data.tlwDeviceId) {
					if (this.iot) {
						this.onListenDevice();
					} else {
						this.iot = new IOT({
							deviceIds: [res.data.tlwDeviceId], // 设备id数组
							// connected:Function,//链接成功回调
							// added:Function,//添加成功回调
							userId: this.userinfo.user_id || 'sida-001',
							changed: (res) => {
								// console.log('changed', res);
								this.upDataViews(res);
							}, // 实时上报回调
							added: (res) => {
								console.log('added', res);
								this.upDataViews(res);
							}, // 实时上报回调
							isThrottle: true, // 是否开启节流
						});
						this.onListenDevice();

						console.log('iot', this.iot);
					}
				}
				uni.hideLoading();
			});
		},

		// 查看数据统计
		toStatistics() {
			uni.navigateTo({
				url:
                    '/packPage/dataStatistics/dataStatistics?id=' +
                    this.id +
                    '&name=' +
                    this.detail.elevatorAddress,
			});
		},

		// 渲染数据
		upDataViews(res) {
			// console.log(res, "upDataViews");
			if (res.id != this.detail.tlwDeviceId) {
				return;
			}
			let keys = Object.keys(this.statusData);

			let obj = {};
			if (res.fields.deviceStatus) {
				this.eleStatusMsg.tlwStatus = res.fields.deviceStatus.status;
			}
			if (res.fields.doorStatus) {
				obj = res.fields.doorStatus;
			}
			if (res.fields.status) {
				obj = res.fields.status;
			}
			for (let key in obj) {
				if (keys.indexOf(key) != -1) {
					this.statusData[key] = obj[key];
				}
			}
		},

		// 订阅设备
		onListenDevice() {
			console.log('订阅设备', this.iot);
			this.iot.subDevices();
		},
		// 去更多报警30天
		toPliceList(item) {
			let dateObj = {
				startAt: new Date(getBeforeDate(29)).getTime(),
				endAt: new Date().getTime(),
				checked: 'month',
			};
			let alarmData = {
				customDate: getBeforeDate(29) + '-' + formatTime(new Date()),
				alarmObj:
                    item && item.eventName
                    	? {
                    		code: item.eventCode,
                    		name: item.eventName,
                    	}
                    	: {},
				dateObj: dateObj,
				checked: 'month',
				item: {
					code: this.detail.tlwDeviceId,
					elevatorId: this.id,
					code: this.id,
					name: this.eleStatusMsg.elevatorAddress,
				},
			};
			uni.setStorageSync('alarmDataList', alarmData);
			uni.navigateTo({
				url: '/packPage/myElevators/myCallPolice',
			});
		},

	},
};
</script>
  
<style lang="scss" scoped>
@import "./card.scss";

page {
    width: 100%;
    height: 100%;
    background-color: #f3f6f8;
}

.wrap {
    background-color: #f3f6f8;
    padding-bottom: 100rpx;
}

.noPadding {
    padding-bottom: 0;
}

.headers {
    width: 100%;
    position: fixed;
    top: 0;
}

.cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 150rpx;
    font-size: 26rpx;
    color: #999999;

    view:nth-of-type(1) {

        image {
            width: 64rpx;
            height: 64rpx;
        }
    }
}

.police {
    .policeContent {
        // margin: 0 26rpx;
        background: #ffffff;
        border-radius: 16rpx;
        // margin-bottom: 40rpx;
        // box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(85,129,162,0.10);
        padding: 24rpx;
        color: #999999;
        padding-bottom: 0;
        font-size: 24rpx;
        padding-top: 12rpx;

        .police_title {
            color: #666;
            font-size: 26rpx;
        }

        .middle {
            display: flex;
            justify-content: space-between;
            padding-top: 12rpx;
            padding-bottom: 8rpx;

            .left {
                color: #fa6400;
                display: flex;

                :nth-child(1) {
                    background: #ffefe4;
                    border-radius: 4rpx;
                    margin-right: 8rpx;
                    padding: 0 8rpx;
                }
            }
        }

        .police_time {
            display: flex;
            justify-content: space-between;
        }
    }
}

.select-view {
    width: 100%;
    height: 72rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    background: #ffffff;
    font-size: 26rpx;
    position: sticky;
    top: 0;
    z-index: 300;
    color: #666666;
    box-shadow: 0px 2px 8px 0px rgba(0, 145, 255, 0.07);
}

.block-list {
    width: calc(100% - 24rpx);
    display: flex;
    padding: 0 12rpx;
    justify-content: space-around;

    .block-item {
        display: flex;
        align-items: center;
        width: calc(33% - 48rpx);
        margin: 12rpx 0;
        padding: 30rpx 15rpx;
        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(85, 129, 162, 0.1);
        border-radius: 16rpx;

        image {
            width: 48rpx;
            height: 48rpx;

            margin-right: 10rpx;
        }

        &-info {
            &-title {
                font-size: 24rpx;
                color: #666;
            }

            &-val {
                font-size: 46rpx;
                font-weight: bold;
                color: #333;
                margin-top: 5rpx;

                text {
                    font-size: 24rpx;
                    color: #666;
                    font-weight: normal;
                    margin-left: 5rpx;
                }
            }
        }
    }
}

// 停梯状态卡片样式
.stop-info {
    width: 100%;

    &-title {
        font-size: 48rpx;
        text-align: center;
        font-weight: bold;
    }

    &-status {
        font-size: 32rpx;
        text-align: center;
        color: #333333;
        margin-top: 10rpx;
        margin-bottom: 4rpx;
    }

    &-orderNo {
        font-size: 26rpx;
        text-align: center;
        color: #666666;
    }

    .healths {
        width: calc(100% - 80rpx);
        padding: 20rpx;
        margin: 20rpx auto;
        opacity: 1;
        background: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(85, 129, 162, 0.1);

        .tips {
            font-size: 26rpx;
            text-align: left;
            color: #666666;
            padding-bottom: 10rpx;
        }

        image {
            width: 100%;
            height: 40rpx;
        }
    }

    &-list {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 20rpx);
        padding: 0 10rpx;
        padding-bottom: 20rpx;

        &-item {
            width: calc(50% - 60rpx);
            margin: 10rpx 10rpx;
            height: 160rpx;
            padding: 20rpx;
            background: #ffffff;
            border-radius: 16rpx;
            box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(85, 129, 162, 0.1);
            display: flex;
            align-items: center;

            image {
                width: 48rpx;
                height: 48rpx;
                margin-right: 20rpx;
            }

            .name {
                font-size: 26rpx;
                text-align: left;
                color: #666666;
            }

            .time {
                font-size: 48rpx;
                font-weight: bold;
                text-align: left;
                color: #333333;

                text {
                    font-size: 22rpx;
                    font-weight: normal;
                    text-align: left;
                    margin-right: 8rpx;
                    margin-left: 2rpx;
                    color: #666666;
                }
            }
        }
    }
}

// 停梯状态卡片样式end

.run-view {
    width: 100%;
    margin: 30rpx auto;
    margin-bottom: 50rpx;
    position: relative;
    background-color: #fff;
}

// .run-view:after {
// 	content: '';
// 	position: absolute;
// 	width: 100%;
// 	height: 60rpx;
// 	bottom: -60rpx;
// 	left: 0;
// 	right: 0;
// 	background: radial-gradient(#f1f1f1, rgba(238,238,238,0.00));

// }

.health-card {
    width: calc(100% - 40rpx);
    margin: 20rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(85, 129, 162, 0.1);

    .progress-con {
        width: calc(100% - 40rpx);
        margin: 0 auto;
    }

    &-tips {
        padding: 20rpx;

        &-title {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #999999;

            image {
                width: 36rpx;
                height: 36rpx;
                margin-right: 4rpx;
            }
        }

        &-content {
            color: #333333;
            font-size: 28rpx;
            margin-top: 4rpx;
        }
    }
}

// 柱状图下的结论
.conclusion-title {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;

    image {
        width: 25px;
        height: 25px;
    }

    .conclusion-content {
        width: calc(100% - 30px);
        font-size: 14px;
        text-align: left;
        color: #333;
        margin: 5px 0;
    }
}

.card-dates {
    display: flex;

    &-item {
        width: 160rpx;
        height: 110rpx;
        background: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(85, 129, 162, 0.1);
        margin: 12rpx;
        display: flex;
        flex-direction: column;
        padding: 24rpx;

        .name {
            color: #666666;
            font-size: 26rpx;
            flex: 1;
            // padding-top: 10rpx;
        }

        .num {
            font-size: 48rpx;
            font-weight: bold;
            color: #333;

            .unit {
                color: #666666;
                font-size: 26rpx;
                font-weight: normal;
                padding-left: 5rpx;
            }
        }
    }
}

.data-card {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 24rpx);
    padding: 0 12rpx;
    padding-bottom: 20rpx;

    &-item {
        width: calc(32.3% - 48rpx);
        opacity: 1;
        background: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(85, 129, 162, 0.1);
        padding: 24rpx 14rpx;
        margin: 12rpx;
        position: relative;

        image {
            width: 72rpx;
            height: 72rpx;
            margin-bottom: 10rpx;
        }

        &-content {
            font-size: 48rpx;
            color: #333;
            font-weight: bold;

            text {
                font-size: 24rpx;
                color: #666;
                padding-left: 4rpx;
                font-weight: normal;
            }
        }

        &-lable {
            font-size: 26rpx;
            color: #666666;
            margin-top: 20rpx;
        }
    }
}

.plans {
    // border-bottom: 1px dashed #e9e9e9;

    .plan-detail {
        background: #f6f6f6;
        border-radius: 4px;
        color: #333;
        font-size: 14px;
        width: calc(100% - 44px);
        margin: 0 auto;
        padding: 10px 10px;
        line-height: 25px;
        margin-bottom: 10px;

        text {
            color: #666666;
        }
    }
}

.chart {
    padding-bottom: 20rpx;
}

.pliceAlarmCard {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12rpx;
    // padding-left: 24rpx;
    // padding-right: 26rpx;

    // display: flex;
    // flex-wrap: wrap;
    // padding-bottom: 20rpx;
    // margin-top: 10rpx;
    // margin-top: 12rpx;
    .pliceAlarm_item {
        // width: 33.3%;
        // background: #ffffff;
        // border-radius: 16rpx;
        // box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(85, 129, 162, 0.1);
        // margin-top: 16rpx;
        // // padding: 0 24rpx;
        // box-sizing: border-box;
        // padding:  48rpx 24rpx 16rpx 24rpx;;
        // min-height: 236rpx;
        position: relative;

        .lastShow {
            width: 96rpx;
            height: 32rpx;
            background: #ffebeb;
            border-radius: 16rpx 0rpx 16rpx 0rpx;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 24rpx;
            text-align: center;
        }

        .pliceAlarm_item_content {
            //    height: 100%;
            //    display: flex;
            //    flex-direction: column;
            //    justify-content: space-between;
            margin-top: 28rpx;
            height: 150rpx;
            display: flex;
            flex-direction: column;

            .pliceAlarm_item_label {
                display: flex;
                flex: 1;
                font-size: 26rpx;
                color: #666;
            }

            .pliceAlarm_item_count {
                display: flex;
                align-items: center;

                .number {
                    height: 56rpx;
                    font-size: 48rpx;
                    font-weight: 600;
                    color: #333;
                }

                .icon {
                    height: 100%;
                    display: flex;
                    align-items: flex-end;
                    color: #666;
                    margin-left: 4rpx;
                }
            }
        }
    }
}

.pliceAlarm {
    width: 100%;
    margin-top: 28rpx;

    // .pliceAlarm_item_label {
    // 	height: 88rpx;
    // }
}

.footer {
    .focusDialog {
        width: 710rpx;
        height: 72rpx;
        background: rgba(51, 51, 51, 0.7);
        border-radius: 8rpx;
        margin: 0rpx auto;
        display: flex;
        align-items: center;
        color: #fff;
        padding: 0 22rpx;
        box-sizing: border-box;
        justify-content: space-between;
        position: fixed;
        bottom: 130rpx;
        left: 20rpx;
        z-index: 100;

        .left,
        .right {
            display: flex;
            align-items: center;
        }

        .left {
            font-size: 28rpx;
        }

        .right {
            font-size: 24rpx;
        }

        image {
            width: 28rpx;
            height: 28rpx;
            margin-right: 6rpx;
        }
    }
}

.footer-btn {
    width: 100%;
    height: 100rpx;
    opacity: 1;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
        width: calc(100% - 40rpx);
        margin: auto auto;
        height: 70rpx;
        opacity: 1;
        background: #6dd400;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #fff;
        font-weight: bold;

        image {
            width: 16px;
            height: 16px;
            margin-right: 2rpx;
        }
    }
}

.status-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    padding: 20rpx 3%;
    margin: 0 auto;
    border-bottom: 1rpx solid #e9e9e9;

    image {
        width: 40rpx;
        height: 40rpx;
    }
}

.list__option {
    font-size: 26rpx;
    color: #666666;
    padding: 26rpx 28rpx;
    display: flex;
    justify-content: center;

    &:not(:last-child) {
        border-bottom: 1rpx solid #dddddd;
    }
}

.working {
    text-align: center;

    image {
        width: 62rpx;
        height: 62rpx;
    }

    view {
        font-size: 32rpx;
        font-weight: 500;
        text-align: center;
        color: #f7b500;
    }
}

.subscribe {
    width: calc(100% - 14rpx - 14rpx);
    height: 98rpx;
    padding: 0 14rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;

    &-btn {
        // width: 722rpx;
        flex: 1;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
        font-size: 28rpx;
        font-weight: 500;
        margin: auto;
        border: 2rpx solid #0091ff;
    }

    &-btn:first-child {
        border: 2rpx solid #f5fbff;
        color: #0091ff;
        background: #f5fbff;
        border-top-left-radius: 8rpx;
        border-bottom-left-radius: 8rpx;
    }

    &-btn:last-child {
        background: #0091ff;
        border: 2rpx solid #0091ff;
        color: #fff;
        border-top-right-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
    }

    .del {
        border: 2rpx solid #0091ff !important;
        color: #fff !important;
        background: #0091ff !important;
    }
}

.disabled {
    background: #f3f6f8;
    color: #ccc !important;
}

.addContent {
    font-size: 28rpx;
    color: #333;
    padding-top: 84rpx;
    display: flex;
    justify-content: center;
    padding-bottom: 20rpx;
}

.card_item {
    border-radius: 16rpx;
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(85, 129, 162, 0.1);
    margin: 24rpx;
}

.showMoreRescue {
    // height: 54rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
    padding-bottom: 24rpx;
    // padding-top: 12rpx;
}

.info-item-content {
    flex-wrap: wrap;

    image {
        width: 32rpx;
        height: 32rpx;
    }
}
</style>
